<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="ft" uri="/fast-tags"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<jsp:include page="/WEB-INF/pages/common/head.jsp"></jsp:include>
<style type="text/css">
	
	.loginLogo{
		background-image:url("${ctx}/resource/img/bg/logreg-bg-app.png");
		background-repeat:no-repeat;
		background-position:center;
		position: relative;
		float: left;
		margin-top: 20px;
		width: 500px;
		height: 500px;
	}

	.form-signin {
		background-color:#99CCFF;
		width: 360px;
		max-width: 500px;
		padding: 19px 29px 29px;
		border: 1px solid #e5e5e5;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
		-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
		box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	}
	
	.form-signin .form-signin-heading,.form-signin .checkbox {
		margin-bottom: 10px;
	}
	
	.form-signin input[type="text"],.form-signin input[type="password"] {
		height: auto;
		margin-bottom: 6px;
		padding: 7px 9px;
	}
	
</style>
</head>
<script type="text/javascript">
	$(function(){
		$.jform.bindValidform("#registerForm");
	});
</script>
<body data-spy="scroll" data-target=".bs-docs-sidebar">
	<div id="bg"></div>
	<jsp:include page="/WEB-INF/pages/common/navbar.jsp"></jsp:include>
	<div class="container" style="height: 55px; width: 100%"></div>
	<div class="container containerDiv">
		<div class="loginLogo">
		</div>
		
		<form id="registerForm" class="form-signin pull-right" action="" method="post"
			autocomplete="off" novalidate="novalidate"		
		>
			<h2 class="form-signin-heading">会员注册</h2>
			<div class="control-group">
				<label class="control-label" for="loginId">
					<span class="required-mark">*</span>
					用户名
				</label>
			    <div class="controls">
			    	<input type="text" id="loginId" name="loginId" class="input-block-level"
			    		datatype="s6-18"
			    		ajaxurl="${ctx}/rest/chenckUserName"
			    		nullmsg="请输入用户名！"
			    		errormsg="您输入的用户名必须在6到18位字符之间！"
			    		required="required"
			    		placeholder="用户名 6到18位字符之间"/>
			    </div>
			</div>
			<div class="control-group">
				<label class="control-label" for="loginPwd">
					<span class="required-mark">*</span>
					密 码
				</label>
				<div class="controls">
					<input type="password" id="loginPwd" name="loginPwd" class="input-block-level"
						datatype="s6-18"
			    		nullmsg="请输入密码！"
			    		errormsg="您输入的密码必须在6到18位字符之间！"
			    		required="required"
						placeholder="密码 6到20位字符之间" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="loginPwd2">
					<span class="required-mark">*</span>
					确认密码
				</label>
				<div class="controls">
					<input type="password" id="loginPwd2" name="loginPwd2" class="input-block-level"
						datatype="*"
						recheck="loginPwd"
			    		nullmsg="请再输入一次密码！"
			    		errormsg="您两次输入的密码不一致！"
			    		required="required"
						placeholder="确认密码" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label control-label" for="email">
					<span class="required-mark">*</span>
					电子邮箱
				</label>
				<div class="controls">
					<input type="email" id="email" name="email" class="input-block-level"
						datatype="e"
			    		nullmsg="请输入您的邮箱地址！"
			    		errormsg="您输入的邮箱地址不正确！"
			    		required="required"
						placeholder="电子邮箱 验证需要的邮箱地址" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="verifyNum">
					<span class="required-mark">*</span>
					验证码 <ft:verifyCode id="test"></ft:verifyCode>
				</label>
				<div class="controls">
					<input type="text" id="verifyNum" name="verifyNum" class="input-block-level"
						required="required"
						datatype="*"
						ajaxurl="${ctx}/rest/checkVerifyCode?id=test"
			    		nullmsg="请输入上图的的验证码！"
			    		errormsg="您输入的验证码不正确！"
			    		required="required"
			    		verifyCode="test"
						placeholder="请输入上图看到的验证码" />
				</div>
			</div>
			<label class="checkbox"> 
				<input type="checkbox" value="remember-me" checked="checked">我同意<a href="#">使用条款和协议</a>
			</label>
			<div class="control-group">
				<button class="btn btn-info" type="submit" onclick="return register()">注册</button>
				<button class="btn btn-info" type="button" onclick="window.location.href='${ctx}'">返回主页</button>
			</div>
		</form>
	</div>
</body>
</html>